<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-radio-group v-model="current" size="small"  @change="currentChange">
					<el-radio-button v-for="(item,index) in menuList" :label="item" />
				</el-radio-group>
			</el-form-item>

			<el-form-item>
				<el-button type="primary"   @click="dialogVisible = true">批量导入班级</el-button>

				<el-button type="primary" @click="openAdd">添加班级</el-button>
			</el-form-item>

		</el-form>

		<el-table :data="classNameList" highlight-current-row>
			<el-table-column type="index" width="70" label="序号" />
			<el-table-column prop="title" label="班级名称">
				<template #default="scope">
					<div>{{(scope.row.title ? (scope.row.title+'-'): '')+scope.row.classname}}</div>
					<div class="title-style" v-if="scope.row.gradeName">{{scope.row.gradeName}}</div>
					<div class="title-style1" st v-if="scope.row.manageName">
						<!-- <u-icon name="account" color="#909193" size="16"></u-icon> -->
						<el-icon>
							<User />
						</el-icon>
						<div class="title-text-style2">{{scope.row.manageName}}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="类型">
				<template #default="scope">
					<el-tag type="primary" v-if="scope.row.manage == '1'">管理员</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" plain size="small" style="margin-right: 5px;" @click="clickCommon(scope.row)" >学生管理</el-button>
					<el-dropdown placement="top-start">
						<el-button plain size="small">其它操作</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="item in settings.commonActions"
									@click="clickSommonSelect(item,scope.row)">{{item.name}}</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>


		<create-qrcode v-if="imageShow" :content="qrcodeContent" :param-name="paramName"
			url="/util/createTransferStationQrcode" :file-name="fileName" @close="imageShow = false"></create-qrcode>

		<el-dialog v-model="dialogVisible" title="批量导入" width="500">
			<el-button text="Excel文件一键导入班级及学生" @click="addManyClassAndStudent" type="primary"
				customStyle="margin: 15px auto 0;width:200px"></el-button>
			<el-upload class="upload-demo" drag :action="$store.state.url+'/student/addManyClassAndStudent'"
				:data="uploadData">
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">
					Excel文件<em>一键导入班级及学生</em>
				</div>
				<template #tip>
					<div class="el-upload__tip">
						xls、xlsx文件格式， <el-link type="primary"
							href="https://www.yaojiapx.cn/webs/%E6%89%B9%E9%87%8F%E6%B7%BB%E5%8A%A0%E7%8F%AD%E7%BA%A7%E7%A4%BA%E4%BE%8B.xlsx">点击此处下载模板</el-link>
					</div>
				</template>
			</el-upload>
		</el-dialog>

		<MyDialog v-model="classDialogVisible" title="班级管理" width="370" @confirm="confirmSubmit">
			<template #default>
				<el-form label-width="70">
					<el-form-item label="班级名称">
						<el-input placeholder="请输入班级名称" v-model="dataFrom.classname" border="surround"
							style="width: 240px"></el-input>
					</el-form-item>
					<el-form-item label="班级类型">
						<el-cascader v-model="dataFrom.gradeName" :options="options" clearable @change="confirmGrade"
							style="width: 240px" />
					</el-form-item>
					<el-form-item label="班主任">
						<el-select v-model="dataFrom.manageId" filterable placeholder="点击选择班主任" style="width: 240px">
							<el-option v-for="item in teacherList" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="任课老师">
						<el-select v-model="dataFrom.teacherIdList" filterable multiple placeholder="点击选择任课老师" style="width: 240px">
							<el-option v-for="item in teacherList" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-form>

			</template>
		</MyDialog>
		
		<SelectStudent v-if="selectStudentShow" :school-id="settings.id" @close="selectStudentShow = false"></SelectStudent>

	</div>
</template>

<script>
	import MyModal from '@/component/MyModal/MyModal.vue'
	import MyDialog from '@/components/MyDialog.vue'
	import CreateQrcode from '@/components/CreateQrcode.vue'
	import myMixin from '@/utils/myMixin.js'
	import SelectStudent from './SelectStudent.vue'
	
	import {
		useMouse
	} from '@/utils/index.js'

	var that;
	export default {
		mixins: [myMixin], //混入
		components: {
			CreateQrcode,
			MyDialog,
			SelectStudent
		},
		data() {
			return {
				selectStudentShow: false,
				teacherList: [],
				dataFrom: {
					manageName: '', //班主任
					manageId: '', //班主任id
					teacherName: '', //老师名称
					teacherIdList: [], //老师id
					gradeName: [], //年级名称
					grade: 0, //年级
				},
				options: [{
						"value": "0",
						"label": "幼儿园",
						"children": [{
								"value": "0",
								"label": "小小班"
							},
							{
								"value": "1",
								"label": "小班"
							},
							{
								"value": "2",
								"label": "中班"
							},
							{
								"value": "3",
								"label": "大班"
							},
							{
								"value": "4",
								"label": "幼小衔接班"
							}
						]
					},
					{
						"value": "1",
						"label": "小学",
						"children": [{
								"value": "0",
								"label": "一年级"
							},
							{
								"value": "1",
								"label": "二年级"
							},
							{
								"value": "2",
								"label": "三年级"
							},
							{
								"value": "3",
								"label": "四年级"
							},
							{
								"value": "4",
								"label": "五年级"
							},
							{
								"value": "5",
								"label": "六年级"
							}
						]
					},
					{
						"value": "2",
						"label": "中学",
						"children": [{
								"value": "0",
								"label": "初一"
							},
							{
								"value": "1",
								"label": "初二"
							},
							{
								"value": "2",
								"label": "初三"
							},
							{
								"value": "3",
								"label": "高一"
							},
							{
								"value": "4",
								"label": "高二"
							},
							{
								"value": "5",
								"label": "高三"
							}
						]
					},
					{
						"value": "3",
						"label": "大学",
						"children": [{
								"value": "0",
								"label": "大一"
							},
							{
								"value": "1",
								"label": "大二"
							},
							{
								"value": "2",
								"label": "大三"
							},
							{
								"value": "3",
								"label": "大四"
							},
							{
								"value": "4",
								"label": "研一"
							},
							{
								"value": "5",
								"label": "研二"
							},
							{
								"value": "6",
								"label": "研三"
							}
						]
					},
					{
						"value": "4",
						"label": "教培机构",
						"children": [{
								"value": "0",
								"label": "学前"
							},
							{
								"value": "1",
								"label": "一年级"
							},
							{
								"value": "2",
								"label": "二年级"
							},
							{
								"value": "3",
								"label": "三年级"
							},
							{
								"value": "4",
								"label": "四年级"
							},
							{
								"value": "5",
								"label": "五年级"
							},
							{
								"value": "6",
								"label": "六年级"
							},
							{
								"value": "7",
								"label": "初一"
							},
							{
								"value": "8",
								"label": "初二"
							},
							{
								"value": "9",
								"label": "初三"
							},
							{
								"value": "10",
								"label": "高一"
							},
							{
								"value": "11",
								"label": "高二"
							},
							{
								"value": "12",
								"label": "高三"
							},
							{
								"value": "13",
								"label": "大学"
							},
							{
								"value": "14",
								"label": "其他"
							}
						]
					},
					{
						"value": "5",
						"label": "其他",
						"children": [{
							"value": "0",
							"label": "其他"
						}]
					}
				],
				uploadData: {
					code: '',
				},
				classDialogVisible: false, //班级弹窗
				dialogVisible: false, //弹窗
				imageShow: false, //展示二维码
				paramName: '',
				qrcodeContent: '', //二维码内容
				fileName: '复制班级给好友', //图片名称
				dataFrom: {
					classname: '',
					manageName: '', //班主任
					manageId: '', //班主任id
					teacherName: '', //老师名称
					teacherIdList: [], //老师id
					gradeName: '', //年级名称
					grade: 0, //年级
				},
				notice: '添加、修改班级，可以设置年级、班主任、任课老师协助管理班级。根据班主任名称排序。',
				title: '添加班级',
				placeholder: '', //点击选择任课老师
				teacherListPopupShow: false, //任课老师多选
				teacherList: [],
				teacherShow: false, //老师展示
				gradeShow: false, //展示年级
				menuList: ['按时间', '按年级', '按老师', '年级+老师'],
				current: '按时间',
				addStatus: false, //指派管理员
				type3: -5, //减金币
				disabled: true, //禁用批量导入按钮
				classNameList: [],
				manyPopupShow: false, //批量导入
				modalShow: false,
				updateModalShow: false, //修改名称显示
				shareType: 0, //分享类型
				settings: {
					commonActionSheetShow: false,
					id: '', //选择班级id
					className: '', //修改名称
					commonActions: [{
							name: '删除班级',
						},
						{
							name: '修改班级信息',
						},
						{
							name: '复制班级给好友',
							openType: 'share',
						},
						{
							name: '邀请管理员加入',
							openType: 'share',
						},
						{
							name: '复制班级口令',
						},
						{
							name: '关联学生或家长',
							openType: 'share',
						}

					],
				}
			}
		},
		setup() {
			return useMouse();
		},
		mounted(options) {
			that = this;


			that.getList();
			that.selectCourseAll();

			that.uploadData.code = that.$store.state.$userInfo.id;
		},
		methods: {
			//选择功能模式
			currentChange(value) {
				that.current = value;
			
				that.getList();
			},
			//打开添加
			openAdd() {
				this.dataFrom.classname = '';
				this.classDialogVisible = true;
				this.settings.id = '';
				that.dataFrom.manageId = '';
				that.dataFrom.manageName = '';
				that.dataFrom.teacherIdList = [];
				that.dataFrom.grade = 0;
				that.dataFrom.gradeName = '';
				this.selectCourseAll(); //查询课程
			},
			//添加班级
			async confirmSubmit() {
				let {
					gradeName
				} = that.dataFrom;
				let gradeName1 = '';
				if (gradeName.length > 0) {
					gradeName1 =
						`${that.options[gradeName[0]]?.label}--${that.options[gradeName[0]]?.children[gradeName[1]]?.label ?? ''}`;
				}

				//获取班级信息
				const data = await that.$asyncHttpJson(
					that.$store.state.url + (that.settings.id ? '/classname/updateById1' : '/classname/addOrUpdate1'), {
						id: that.settings.id,
						code: that.$store.state.$userInfo.id,
						...that.dataFrom,
						gradeName: gradeName1
					}
				)

				that.classDialogVisible = false;

				that.getList();

			},
			//确认年级
			confirmGrade(e) {
				this.dataFrom.grade = (e["0"] + 1) * 100 + e["1"];
			},
			//获取老师列表
			async selectCourseAll() {
				let url = "/course/selectCourseAll";
				var dataForm = {
					unionid: that.$store.state.$userInfo.id,
					organizationId: that.$store.state.organizationId,
				}

				//获取班级信息
				const data = await that.$asyncHttpConfig({
					url: url,
					data: dataForm
				})
				that.teacherList = data.organizationDetailList;
			},
			//点击记录弹出窗
			clickCommon(item) {
				that.settings.id = item.id;
				that.selectStudentShow = true;
			},
			//签到点击获取所点击选项name
			async clickSommonSelect(item, row) {
				that.settings.id = row.id;
				that.settings.className = row.classname;

				var name = item.name;
				//添加学生
				var url = "";

				if (name == '添加学生') {
					url = "/pages/addStudent/addStudent?schoolid=" + that.settings.id;
					// uni.navigateTo({
					// 	url: url
					// });
				} else if (name == '查看详情') {
					url = '/pages/selectStudent/selectStudent?schoolid=' + that.settings.id;
					// uni.navigateTo({
					// 	url: url
					// });
				} else if (name == '删除班级') {
					that.deleteclass();
					return;
				} else if (name == '修改班级信息') {
					that.classDialogVisible = true;
					const data = await that.$asyncHttpConfig({
						url: '/classname/getById',
						data: {
							id: that.settings.id,
						}
					})
					const {
						className,
						teacherIdList
					} = data;

					that.$nextTick(() => {
						that.dataFrom.manageId = '';
						that.dataFrom.gradeName = [];
						that.dataFrom.grade = 0;
						that.dataFrom.teacherIdList = [];

						if (that.teacherList.some(item => item.id == className.manageId)) {
							that.dataFrom.manageId = className.manageId;
						}

						that.dataFrom.teacherIdList = teacherIdList;
						that.dataFrom.grade = className.grade;
						that.dataFrom.classname = className.classname;

						let gradeName = className.gradeName;
						if (gradeName) {
							let gradeNames = gradeName.split("--");

							let parentItem = that.options.find(item => item.label == gradeNames[0]);
							let childCalue = parentItem.children.find(item => item.label == gradeNames[1]);
							that.dataFrom.gradeName = [parentItem.value, childCalue.value];
						}

					})
					return;
				} else if (name == '邀请管理员加入') {
					that.shareType = 1;
					// that.addTeacherClick();
					that.paramName = that.settings.id;
					that.qrcodeContent = 'pages/addSchool/addSchool?managerId=' + that.settings.id;
					that.fileName = "邀请管理员加入";
					that.imageShow = true;
					return;
				} else if (name == '复制班级给好友') {
					that.shareType = 0;
					that.paramName = that.settings.id;
					that.qrcodeContent = 'pages/addSchool/addSchool?commentUserId=' + that.settings.id
					that.fileName = "复制班级给好友";
					that.imageShow = true;
					return;
				} else if (name == '复制班级口令') {
					let textarea = document.createElement('textarea');
					textarea.style.position = 'fixed';
					textarea.style.opacity = 0;
					textarea.value = that.settings.id;
					document.body.appendChild(textarea);
					textarea.select();
					document.execCommand('copy');
					document.body.removeChild(textarea);

					that.hintMessage('复制成功')
					return;
				} else if (name == '关联学生或家长') {
					that.shareType = 2; //分享班级
					that.paramName = that.settings.id;
					that.qrcodeContent = '/pagesPatriarch/classJoin/classJoin?title=' + that.settings.id + "&redirectUrl=" + JSON
						.stringify(
							'/pages/homeStudent/homeStudent');
					that.fileName = "关联学生或家长";
					that.imageShow = true;
				}


			},

			//删除班级
			deleteclass() {
				that.confirmMessage('确认删除该班级？', async () => {
					const res = await that.$asyncHttpConfig({
						url: '/classname/delete',
						data: {
							id: that.settings.id,
						}
					})

					that.hintMessage('删除成功');

					that.getList();
				})

			},
			//获取班级列表
			async getList() {
				let url = "/classname/queryAll2";
				var dataForm = {
					code: that.$store.state.$userInfo.id,
					cid: "",
					scene: "",
					managerId: "",
					organizationId: that.$store.state.organizationId,
					organizationType: that.$store.state.organizationType,
					showType: that.menuList.findIndex(item => item == that.current)
				}

				//获取班级信息
				const data = await that.$asyncHttpConfig({
					url: url,
					data: dataForm
				})
				that.classNameList = data.classNameList; //班级列表
				that.disabled = data.open; //班级列表

				that.$store.state.$userInfo.id = data.user;
				that.$store.state.uid = data.uid;
				that.type3 = data.type3;
			},
		}
	}
</script>

<style>
	.title-style {
		font-size: 13px;
		color: #909193;
	}

	.title-style1 {
		font-size: 13px;
		color: #909193;
		display: flex;
		align-items: center;
	}

	.title-text-style2 {

		padding-left: 2px;

	}
</style>